<template>
    <div>
        <el-header style="background-color: rgba(1, 1, 2, 0);">
            <el-menu :default-active="activeMenu" class="menu" mode="horizontal">
                <div class="logo">
                    <img src="../../../src/assets/imgs/Logo.png" style="width: 100px;height: auto;" />
                </div>
                <el-menu-item index="/" @click="navigate('/')">首页</el-menu-item>
                <el-menu-item index="/shop" @click="navigate('/shop')">新品</el-menu-item>
                <el-menu-item index="/cart" @click="navigate('/cart')">购物车</el-menu-item>
                <el-menu-item index="/individual" @click="navigate('/individual')">个人中心</el-menu-item>
                <el-input placeholder="搜索" class="search-input" v-model="searchQuery" @keyup.enter="performSearch"></el-input>
                <el-button round style="background-color: honeydew;" @click="navigate('/login')">登录|注册</el-button>
                <el-text size='large' tag="b"  @click="navigate('/individual')">{{ user.userName }}</el-text>
                <el-button type="default" @click="logout">注销</el-button>
            </el-menu>
        </el-header>

        <slot>
            <router-view></router-view>
        </slot>

        <el-footer style="background-color:#409EFF;bottom: 0%;">
            <el-row>
            <el-col :span="8">
                <el-link>With Underline</el-link>
            </el-col>
            <el-col :span="8">
                <el-link>With Underline</el-link>
            </el-col>
            <el-col :span="8">
                <el-link>With Underline</el-link>
            </el-col>
        </el-row>
        </el-footer>
    </div>
</template>

<script>
import axios from '../../axios/axios';

export default {
    name: 'BaseLayout',
    props: {
        activeMenu: {
            type: String,
            default: '/'
        }
    },
    data() {
        return {
            user: {
                userName: '',
            },
            searchQuery: ''
        };
    },
    methods: {
        navigate(path) {
            this.$router.push(path);
        },
        performSearch() {
            console.log('搜索内容:', this.searchQuery);
            // 可以添加其他搜索处理逻辑
        },
        logout() {
            axios.get('/auth/logout')
                .then(() => {
                    this.$router.push('/login');
                })
                .catch(error => {
                    console.error("注销失败:", error);
                    alert("注销请求失败，请稍后重试。");
                });
        },
        fetchUserInfo() {
            axios.get('/admin/user/myself')
                .then(response => {
                    if (response && response.data) {
                        this.user = response.data; // 直接获取用户信息数据
                    }
                })
                .catch(error => {
                    console.error('获取用户信息失败:', error.message);
                });
        }
    },
    mounted() {
        this.fetchUserInfo(); // 组件加载时获取用户信息
    }
}
</script>

<style scoped>
.logo {
    font-size: 24px;
    padding: 10px;
    text-align: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}
.menu {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    width: 85%;
    margin: 0 auto;
}
.search-input {
    width: 200px; /* 设置搜索框的宽度 */
}
</style>
